<template>
	<jk-dialog
		v-model="showDialog"
		title="销售订单-下达"
		width="900px"
		:append-to-body="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" :show-message="false">
			<div ref="box1">
				<div class="margin-bottom-4 flex-between-center" style="align-items: flex-end;">
					<div class="flex-start-center" style="font-size: 13px;">
						<el-tag type="primary" effect="plain" class="">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
					</div>
				</div>
				<jk-card class="">
					<el-row ref="box2">
						<el-col :span="24">
							<el-form-item class="margin-bottom-10" label="品种">
								<span class="read-only-2">{{ ruleForm.productName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item class="margin-bottom-0" label="销售订单">
								<span class="read-only-2">{{ dataList && dataList.length ? dataList.map(x => x.saleOrderCode).join(',') : '' }}</span>
							</el-form-item>
						</el-col>
						<!--<el-col :span="12">
							<el-form-item class="margin-bottom-0" label="待下达数量">
								<span class="read-only-2">{{ ruleForm.productName }}</span>
							</el-form-item>
						</el-col>-->
					</el-row>
				</jk-card>
			</div>
			<div class="margin-top-10 margin-bottom-4 flex-between-center">
				<div class="flex-start-center" style="align-items: flex-end;font-size: 12px;">
					<el-tag effect="plain"><i class="el-icon-postcard"></i> 同品种生产订单</el-tag>
					<span>(为您找到: {{ tableData ? tableData.length : 0 }} 张生产订单)</span>
				</div>
				<jk-button size="mini" type="success" icon="el-icon-circle-plus" @click="onNewBtn">新生产订单</jk-button>
			</div>
			<jk-table
				:row-config="{isCurrent: true}"
				:data="tableData || []"
				:height="dialogTableHeight"
				:loading="tableLoading"
			>
				<vxe-column type="seq" title="序号" align="center" width="60"></vxe-column>
				<vxe-column title="生产订单号" align="left" field="code" :width="150"></vxe-column>
				<vxe-column title="优先级" align="left" field="priorityName" :width="80">
					<template slot-scope="scope">
						<jk-state-bar :state="scope.row.priorityId" :state-list="priorityList"></jk-state-bar>
					</template>
				</vxe-column>
				<vxe-column title="品种" align="left" field="productName" :min-width="160"></vxe-column>
				<vxe-column title="批号" align="left" field="batchCode" :min-width="120">
					<template slot-scope="scope">
						<span>{{ scope.row.productOrderBatchList && scope.row.productOrderBatchList.length ? scope.row.productOrderBatchList.map(x => x.batchCode).join(',') : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column title="销售数量" align="right" field="saleQty" :width="80"></vxe-column>
				<vxe-column title="生产数量" align="right" field="orderQty" :width="80"></vxe-column>
				<vxe-column title="操作" align="center" field="operation" :width="100">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-button size="mini" type="primary" icon="el-icon-s-flag" @click="onExistBtn(scope.row)">下达</jk-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>
		</el-form>
	</jk-dialog>
</template>

<script>
    import {
        productionPrdOrderPage
    } from '../../../api/production/order';
    import orderListPopoverBar from './components/order-list-popover-bar';
    import { orderPriorityList, saleOrderStateList } from '../../../utils/jk/status-option-list';
    import calTableHeight from '../../../mixins/cal-dialog-height';
    import { tipsBar } from '../../../utils/jk/jk-tool';
    export default {
        mixins: [calTableHeight],
        components: {
            orderListPopoverBar
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                priorityList: orderPriorityList,
                saleOrderStateList: saleOrderStateList,
                showDialog: false,
                tableLoading: true,
                saveBtnLoading: false,
                ruleForm: {},
                rules: {},
                tableData: []
            };
        },
        methods: {
            onExistBtn(row) {
                if (row.productName === this.ruleForm.productName) {
                    const id = row.id;
                    this.onVisibleChange(false);
                    this.$toOtherRouter({
                        name: 'editPrdOrder',
                        query: {
                            id: id,
                            saleOrderProductIds: this.dataList.map(x => x.id).join(',')
                        }
                    });
                } else {
                    tipsBar(this, 'custom', 'warning', `只能合并相同品种的订单!`);
                }
            },
            onNewBtn() {
                this.onVisibleChange(false);
                this.$toOtherRouter({
                    name: 'addPrdOrder',
                    query: {
                        saleOrderProductIds: this.dataList.map(x => x.id).join(',')
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getDetailRequest() {
                return productionPrdOrderPage({
                    serviceStates: [0, 1, 2],
                    productName: this.ruleForm.productName
                }).then(res => {
                    if (res.data.status === 200) {
                        this.tableData = res.data.res || [];
                    }
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getDetailRequest();
                this.tableLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.ruleForm = this.dataList && this.dataList.length ? JSON.parse(JSON.stringify(this.dataList[0])) : {};
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
// 解决在生产订单编辑页打开时全局的margin-bottom-10被覆盖的问题
.margin-bottom-10 {
    margin-bottom: 10px;
}
</style>
